<template>
  <div class="usertable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addUserForm">
          <el-form label-position="top" ref="formU" :model="form" :rules="rules">
            <el-row>
              <el-col :span="3">
                <el-form-item label="工号" prop="userInfo.empno">
                  <el-input v-model.trim="form.userInfo.empno" placeholder="请输入工号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="登录账号" prop="userInfo.username">
                  <el-input v-model.trim="form.userInfo.username" placeholder="请输入登录账号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="用户姓名" prop="userInfo.name">
                  <el-input v-model.trim="form.userInfo.name" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="用户角色" prop="userInfo.roleId">
                  <el-select v-model="form.userInfo.roleId" multiple placeholder="请选择用户角色" style="width:100%;">
                    <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="角色级别"  prop="userInfo.roleLevel">
                  <el-select v-model="form.userInfo.roleLevel" :disabled="disabled" multiple placeholder="请选择角色级别" style="width:100%;">
                    <el-option v-for="item in roleLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="联系电话" prop="userInfo.phone">
                  <el-input v-model.trim="form.userInfo.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <el-form-item label="联系地址" prop="userInfo.addr">
                  <el-input v-model.trim="form.userInfo.addr" placeholder="请输入联系地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="公司邮箱" prop="userInfo.email">
                  <el-input v-model.trim="form.userInfo.email" placeholder="请输入公司邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="新桥邮箱" prop="userInfo.sinoEmail">
                  <el-input v-model.trim="form.userInfo.sinoEmail" placeholder="请输入新桥邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="性别" prop="userInfo.sex">
                  <el-select v-model="form.userInfo.sex" placeholder="请选择性别" style="width:100%;">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="生日" prop="userInfo.birthday">
                  <el-date-picker
                    v-model="form.userInfo.birthday"
                    type="date"
                    placeholder="请选择用户生日"
                    style="width:100%;"
                   >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item label="学历" prop="userInfo.education">
                  <el-select v-model="form.userInfo.education" placeholder="请选择用户学历" style="width:100%;">
                    <el-option label="博士研究生" value="博士研究生"></el-option>
                    <el-option label="硕士研究生" value="硕士研究生"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="大专" value="大专"></el-option>
                    <el-option label="中专" value="中专"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                 <el-form-item label="所属部门" prop="userInfo.companyId">
                  <el-select  v-model="form.userInfo.companyId" multiple  placeholder="请输入所属部门" style="width:100%">
                    <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="岗位名称" prop="userInfo.postId">
                  <el-select v-model="form.userInfo.postId" placeholder="请输入岗位名称" style="width:100%">
                    <el-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="3" :offset="1">
                 <el-form-item label="所属team" prop="userInfo.TeamId">
                  <el-select v-model="form.userInfo.TeamId" multiple placeholder="请输入所属team" style="width:100%">
                    <el-option v-for="item in groupTeam" :key="item.tid" :label="item.tname" :value="item.tid"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="3" :offset="1">
                 <el-form-item label="所属小组" prop="userInfo.groupId">
                  <el-select v-model="form.userInfo.groupId" multiple placeholder="请输入所属小组" style="width:100%">
                    <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="所属地区" prop="userInfo.jobAreaId">
                  <el-input v-model="form.userInfo.jobAreaId" placeholder="请输入所属地区"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                 <el-form-item label="出勤状态" prop="userInfo.status">
                  <el-select v-model="form.userInfo.status" placeholder="请选择出勤状态" >
                    <el-option label="正常出勤" value="cq"></el-option>
                    <el-option label="请假" value="qj"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button class="save" @click="submitForm('formU')">保存</el-button>
              <el-button class="cancel" @click="cancelForm">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  export default{
    name: 'adduser',
    data(){
      var CheckTel = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入电话号码'));
        } else if (!Number.isInteger( +value)) {
          callback(new Error('电话号码必须是数字'));
        } else if (value.toString().length != 11) {
          callback(new Error('电话号码必须是11位'));
        } else {
          callback();
        }
      };
       var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }
      var sinoEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback()
        }else{
          setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
        }

      }
      return {
        form:{
          userInfo:{
            empno:null,
            username:"",
            name:"",
            roleId:[],
            roleLevel:[],
            phone:null,
            addr:"",
            email:"",
            sinoEmail:"",
            sex:"",
            birthday:"",
            education:"",
            companyId:[],
            postId:"",
            groupId:[],
            TeamId:[],
            jobAreaId:"",
            status:'',
          }

        },
        roleList:[],
        companyList:[],
        postList:[],
        groupList:[],
        groupTeam:[],
        roleLevelList:[],
        disabled:false,
        rules:{
          userInfo:{
            empno:[
            { required:true ,message:"请输入工号", trigger:"blur"}
            ],
            username:[
              { required:true ,message:"请输入eoss登录账号", trigger:"blur"}
            ],
            name:[
              { required:true ,message:"请输入用户姓名", trigger:"blur"}
            ],
            roleId:[
              { required:true ,message:"请选择用户角色", trigger:"change"}
            ],
            roleLevel:[
              { required:false ,message:"请选择角色级别", trigger:"blur"}
            ],
            phone:[
              { required:true ,validator: CheckTel, trigger:"change"}
            ],
            addr:[
              { required:true ,message:"请输入联系地址", trigger:"blur"}
            ],
            email:[
              { required:true ,validator: checkEmail, trigger:"blur"}
            ],
            sinoEmail:[
              { required:false ,validator: sinoEmail, trigger:"blur"}
            ],
            sex:[
              { required:true ,message:"请输入用户性别", trigger:"blur"}
            ],
            birthday:[
              { required:true ,message:"请选择用户生日", trigger:"change"}
            ],
            education:[
              { required:true ,message:"请输入用户学历", trigger:"blur"}
            ],
            companyId:[
              { required:true ,message:"请选择所属部门", trigger:"change"}
            ],
            postId:[
              { required:true ,message:"请选择岗位名称", trigger:"change"}
            ],
            groupId:[
              { required:true ,message:"请选择所属小组", trigger:"change"}
            ],
            TeamId:[
              { required:true ,message:"请选择所属team", trigger:"change"}
            ],
            jobAreaId:[
              { required:true ,message:"请输入所属地区", trigger:"blur"}
            ],
            status:[
              { required:true ,message:"请输入出勤状态", trigger:"blur"}
            ],
          }

        }
      }
    },

    created(){
      this.initdata();
      //用户角色下拉框
      axios.get(this.url + "/sysuser/getRole")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.roleList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getCompany")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.companyList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getPost")
      .then(res =>{
        // this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.postList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getGroup")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){
          this.groupList = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/getSysTeam")
      .then(res =>{
        this.unlogin(res.data.code);
        if(res.data.code == 200){       
          this.groupTeam = res.data.data;
        }
      });
      // 角色级别下拉框
      axios.get(this.url + "/sysuser/getSysGrade")
      .then(res =>{
        if(res.data.code == 200){
          this.unlogin(res.data.code);
          this.roleLevelList = res.data.data
        }
      })
    },
    methods: {
      initdata(){
        this.form = {
          userInfo:{
            empno:null,
            username:"",
            name:"",
            roleId:[],
            roleLevel:[],
            phone:null,
            addr:"",
            email:"",
            sinoEmail:"",
            sex:"",
            birthday:"",
            education:"",
            companyId:[],
            postId:"",
            groupId:[],
            jobAreaId:"",
            status:''
          }
        }
      },
      submitForm(formName){
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 发请求
            if(this.form.userInfo.sinoEmail == ""){
              this.form.userInfo.sinoEmail = "无"
            }
            axios.post(this.url + "/sysuser/addUser",this.form)
            .then(res => {
              this.unlogin(res.data.code);
              if(res.data.code == 200){
                this.$emit("success");
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancelForm() {
      this.$emit("hide");
    }
    },
    watch:{
      "form.userInfo.roleId":function(val){
        if(val.length == 1){
          if(val[0] == 6 || val[0] == 8){
            this.disabled = true;
            this.form.userInfo.roleLevel = [];
          }else {
            this.disabled = false
          }
        }else if(val.length == 2){
          if(val[0] == 6 && val[1] == 8){
            this.disabled = true;
            this.form.userInfo.roleLevel = [];
          }else if(val[0] == 8 && val[1] == 6){
            this.form.userInfo.roleLevel = [];
            this.disabled = true;
          }else{
            this.disabled = false
          }
        }
      }
    }
  }
</script>
<style scoped>
.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.cancel {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}
.usertable{
  background-color:#fff;
}
</style>
